<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="300"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // --- Helper function to draw a line with an optional arrow at the end ---
    function drawLineWithArrow(ctx, x1, y1, x2, y2, hasArrow) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        if (hasArrow) {
            const headlen = 8;
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
    }

    // --- Main drawing ---

    // Define coordinates
    const y_top = 70;
    const y_mid = 150;
    const y_bot = 230;
    const x_start = 40;
    const x_end = 560;
    const v_line1_x = 170;
    const v_line2_x = 315;
    const v_line3_x = 460;

    // Draw horizontal lines
    drawLineWithArrow(ctx, x_start, y_top, x_end, y_top, false);
    drawLineWithArrow(ctx, x_start, y_mid, x_end, y_mid, true); // z-axis
    drawLineWithArrow(ctx, x_start, y_bot, x_end, y_bot, false);

    // Draw vertical lines (wavefronts)
    ctx.beginPath();
    ctx.moveTo(v_line1_x, y_top);
    ctx.lineTo(v_line1_x, y_bot);
    ctx.moveTo(v_line2_x, y_top);
    ctx.lineTo(v_line2_x, y_bot);
    ctx.moveTo(v_line3_x, y_top);
    ctx.lineTo(v_line3_x, y_bot);
    ctx.stroke();

    // Draw propagation arrows in cells
    const arrow_center1 = (v_line1_x + v_line2_x) / 2;
    const arrow_center2 = (v_line2_x + v_line3_x) / 2;
    const arrow_half_len = 20;

    drawLineWithArrow(ctx, arrow_center1 - arrow_half_len, y_top, arrow_center1 + arrow_half_len, y_top, true);
    drawLineWithArrow(ctx, arrow_center1 - arrow_half_len, y_mid, arrow_center1 + arrow_half_len, y_mid, true);
    drawLineWithArrow(ctx, arrow_center1 - arrow_half_len, y_bot, arrow_center1 + arrow_half_len, y_bot, true);

    drawLineWithArrow(ctx, arrow_center2 - arrow_half_len, y_top, arrow_center2 + arrow_half_len, y_top, true);
    drawLineWithArrow(ctx, arrow_center2 - arrow_half_len, y_mid, arrow_center2 + arrow_half_len, y_mid, true);
    drawLineWithArrow(ctx, arrow_center2 - arrow_half_len, y_bot, arrow_center2 + arrow_half_len, y_bot, true);

    // Draw point P1
    const p1_x = 220;
    const p1_y = 195;
    ctx.beginPath();
    ctx.arc(p1_x, p1_y, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = '24px Times New Roman';
    ctx.fillText("P", p1_x + 10, p1_y + 8);
    ctx.font = '16px Times New Roman';
    ctx.fillText("1", p1_x + 24, p1_y + 12);

    // Draw dashed line for P1
    ctx.beginPath();
    ctx.setLineDash([3, 3]);
    ctx.moveTo(p1_x, p1_y);
    ctx.lineTo(p1_x, y_mid);
    ctx.stroke();
    ctx.setLineDash([]);

    // Draw point P2
    const p2_x = 388;
    const p2_y = 105;
    ctx.beginPath();
    ctx.arc(p2_x, p2_y, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = '24px Times New Roman';
    ctx.fillText("P", p2_x + 10, p2_y + 8);
    ctx.font = '16px Times New Roman';
    ctx.fillText("2", p2_x + 24, p2_y + 12);

    // Draw dashed line for P2
    ctx.beginPath();
    ctx.setLineDash([3, 3]);
    ctx.moveTo(p2_x, p2_y);
    ctx.lineTo(p2_x, y_mid);
    ctx.stroke();
    ctx.setLineDash([]);

    // Draw labels
    ctx.font = '22px Times New Roman';
    ctx.fillText("z", x_end + 10, y_mid + 8);

    const z1_x = 245;
    const z1_y = 110;
    ctx.fillText("z", z1_x, z1_y);
    ctx.font = '16px Times New Roman';
    ctx.fillText("1", z1_x + 10, z1_y + 5);

    const z2_x = 388;
    const z2_y = 205;
    ctx.font = '22px Times New Roman';
    ctx.fillText("z", z2_x, z2_y);
    ctx.font = '16px Times New Roman';
    ctx.fillText("2", z2_x + 10, z2_y + 5);
</script>
</body>
</html>